<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>美宜佳</title>
    <link rel="icon" href="images/favico.ico">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./js/base.js"></script>
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../backend/plugins/element-ui/index.css"/>
    <!--引入vant样式-->
    <link rel="stylesheet" href="styles/vant.min.css"/>
    <!-- 引入样式  -->
    <link rel="stylesheet" href="styles/index.css"/>
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="styles/main.css"/>
</head>
<body>
<div id="main" class="app">
    <!-- 页面头部 用于跳转个人中心-->
    <div class="divHead">
        <img src="./images/user.png" @click="toUserPage"/>
    </div>
    <!--   简介-->
    <div class="divTitle">
        <div class="divStatic">
            <img src="./images/logo.png" class="logo"/>
            <div class="divDesc">
                <div class="divName">美宜佳</div>
                <div class="divSend">
                    <span><img src="./images/time.png"/> 距离1.5km</span>
                    <span><img src="./images/money.png"/> 配送费6元</span>
                    <span><img src="./images/location.png"/> 预计时长12min</span>
                </div>
            </div>
        </div>
        <div class="divDesc">
            美宜佳是充满欢乐与创意的玩具售卖系统，致力于为孩子们提供多样化、高品质、安全有趣的玩具选择，
            我们相信玩具不仅仅是孩子们的游戏工具，更是他们成长路上的良伴！
        </div>
    </div>
    <!--    主体部分-->
    <div class="divBody">
        <!--        类型 即主部分左侧类别名称(玩具/套餐)-->
        <div class="divType">
            <ul>
                <li v-for="(item,index) in categoryList" :key="index" @click="categoryClick(index,item.id,item.type)"
                    :class="{active:activeType === index}">{{item.name}}
                </li>
            </ul>
        </div>
        <!--        右侧(玩具/套餐)个体列表-->
        <div class="divMenu">
            <div>
                <div class="divItem" v-for="(item,index) in toyList" :key="index" @click="toyDetails(item)">
                    <!-- 单品图片-->
                    <el-image :src="imgPathConvert(item.image)">
                        <div slot="error" class="image-slot">
                            <img src="./images/noImg.png"/>
                        </div>
                    </el-image>

                    <div>
                        <!--                        名字-->
                        <div class="divName">{{item.name}}</div>
                        <!--                        描述-->
                        <div class="divDesc">{{item.description}}</div>
                        <!--                        销售量-->
                        <div class="divDesc">{{'总销' + (item.saleNum ? item.saleNum : 0) }}</div>
                        <!--                        价格-->
                        <div class="divBottom"><span>￥</span><span>{{item.price / 100}}</span></div>
                        <!--添加按钮-->
                        <div class="divNum">
                            <!--数字大于0显示 减少数量的按钮-->
                            <div class="divSubtract" v-if="item.number > 0">
                                <img src="./images/subtract.png" @click.prevent.stop="subtractCart(item)"/>
                            </div>
                            <!--当前数量-->
                            <div class="divToyNum">{{item.number}}</div>
                            <!-- 数字不为空则显示 增加数量的按钮-->
                            <div class="divAdd">
                                <img src="./images/add.png" @click.prevent.stop="addCart(item)"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="divLayer">
        <div class="divLayerLeft"></div>
        <div class="divLayerRight"></div>
    </div>
    <!--    购物车-->
    <div class="divCart" v-if="categoryList.length > 0">
        <div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"
             @click="openCart"></div>
        <div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}"
             v-if="cartData && cartData.length > 0">{{ goodsNum }}
        </div>
        <div class="divNum">
            <span>￥</span>
            <span>{{goodsPrice}}</span>
        </div>
        <div class="divPrice"></div>
        <div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}"
             @click="toAddOrderPage">去结算
        </div>
    </div>
    <!--    购物车的列表内容-->
    <van-popup v-model="cartDialogShow" position="bottom" :style="{ height: '50%' }" class="dialogCart">
        <!--        购物车头部部分-->
        <div class="divCartTitle">
            <div class="title">购物车</div>
            <div class="clear" @click="clearCart">
                <i class="el-icon-delete"></i> 清空
            </div>
        </div>
        <!--        购物车内容部分-->
        <div class="divCartContent">
            <div v-for="item in cartData" :key="item.id" class="divCartItem">
                <!--                图片-->
                <el-image :src="imgPathConvert(item.image)">
                    <div slot="error" class="image-slot">
                        <img src="./images/noImg.png"/>
                    </div>
                </el-image>
                <!--                描述-->
                <div class="divDesc">
                    <div class="name">{{item.name}}</div>
                    <div class="price">
                        <span class="spanMoney">￥</span>{{item.amount}}
                    </div>
                </div>
                <!--                数量-->
                <div class="divNum">
                    <!--                    减号按钮-->
                    <div class="divSubtract" v-if="item.number > 0 && item.number">
                        <img src="./images/subtract.png" @click="cartNumberSubtract(item)"/>
                    </div>
                    <!--                    数量-->
                    <div class="divToyNum" style="width: 18rem; height: 36rem">{{item.number}}</div>
                    <!--                    加按钮-->
                    <div class="divAdd">
                        <img src="./images/add.png" @click="cartNumAdd(item)"/>
                    </div>
                </div>
                <div class="divSplit"></div>
            </div>
        </div>
    </van-popup>
    <!--    单品的详细列表-->
    <van-dialog v-model="detailsDialog.show"
                :show-confirm-button="false"
                class="detailsDialog"
                ref="detailsDialog"
                v-if="detailsDialog.show"
    >
        <div class="divContainer">
            <!--            图片部分-->
            <el-image :src="imgPathConvert(detailsDialog.item.image)">
                <div slot="error" class="image-slot">
                    <img src="./images/noImg.png"/>
                </div>
            </el-image>
            <!--            名称-->
            <div class="title">{{detailsDialog.item.name}}</div>
            <!--            描述-->
            <div class="content">{{detailsDialog.item.description}}</div>
        </div>
        <!--        数量-->
        <div class="divNum">
            <!--           左侧 价格部分-->
            <div class="left">
                <span>￥</span><span>{{detailsDialog.item.price / 100}}</span>
            </div>
            <!--          加减数量  -->
            <div class="right">
                <!--                减少-->
                <div class="divSubtract" v-if="detailsDialog.item.number > 0">
                    <img src="./images/subtract.png" @click="subtractCart(detailsDialog.item)"/>
                </div>
                <!--                数量-->
                <div class="divToyNum">{{detailsDialog.item.number}}</div>
                <!--                添加-->
                <div class="divAdd">
                    <img src="./images/add.png" @click="addCart(detailsDialog.item)"/>
                </div>
            </div>
        </div>
        <!--        关闭详细界面-->
        <div class="detailsDialogClose" @click="detailsDialog.show = false">
            <img src="./images/close.png"/>
        </div>
    </van-dialog>
    <!--    套餐的的详细列表-->
    <van-dialog v-model="setMealDialog.show"
                :show-confirm-button="false"
                class="setMealDetailsDialog"
                ref="setMealDetailsDialogd"
                v-if="setMealDialog.show"
    >
        <div class="divContainer">
            <!--            名称-->
            <div class="title">{{setMealDialog.item.name}}</div>
            <!--            套餐包含的玩具列表-->
            <div class="item" v-for="(item,index) in setMealDialog.item.list" :key="index">
                <!--                图片-->
                <el-image :src="imgPathConvert(item.image)">
                    <div slot="error" class="image-slot">
                        <img src="./images/noImg.png"/>
                    </div>
                </el-image>
                <!--             本套餐所持有的单品数量-->
                <div class="divSubTitle">{{item.name + '(' + item.copies + '份)' }}
                    <div class="divPrice">
                        <span>￥</span><span>{{item.price / 100}}</span>
                    </div>
                </div>
                <!--                描述-->
                <div class="content">{{item.description}}</div>
            </div>
        </div>
        <!--        加减相关-->
        <div class="divNum">
            <!--            价格-->
            <div class="left">
                <span>￥</span><span>{{setMealDialog.item.price / 100}}</span>
            </div>
            <!--       加减数量-->
            <div class="right">
                <!--                减-->
                <div class="divSubtract" v-if="setMealDialog.item.number > 0">
                    <img src="./images/subtract.png" @click="subtractCart(setMealDialog.item)"/>
                </div>
                <!--                数量-->
                <div class="divToyNum">{{setMealDialog.item.number}}</div>
                <!--                添加-->
                <div class="divAdd" v-if="setMealDialog.item.number">
                    <img src="./images/add.png" @click="addCart(setMealDialog.item)"/>
                </div>
                <!--                若是没有数字则替换文字-->
                <div class="addCart" @click="addCart(setMealDialog.item)" v-if="!setMealDialog.item.number">加入购物车</div>
            </div>
        </div>
        <!--        关闭详细界面-->
        <div class="detailsDialogClose" @click="setMealDialog.show = false">
            <img src="./images/close.png"/>
        </div>
    </van-dialog>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../backend/plugins/axios/axios.min.js"></script>
<script src="./js/request.js"></script>
<script src="./js/common.js"></script>
<script src="./api/main.js"></script>
</body>
<script>
    new Vue({
        el: '#main',
        data() {
            return {
                activeCategoryType: 0,//当前显示的页面category类型 0套餐 1玩具
                activeType: 0,//当前活跃的种类索引
                categoryList: [],//左侧导航栏种类列表
                categoryId: undefined,//顾名思义 用于发给后端查询对应id对应的类型列表
                toyList: [],//玩具列表数据
                cartData: [],//购物车数据数据
                cartDialogShow: false,//是否显示购物车弹窗
                detailsDialog: { //点击单品显示细节的的弹窗对象
                    show: false,
                    item: {}
                },
                setMealDialog: { //点击套餐显示细节的的弹窗
                    show: false,
                    item: {}
                },
            }
        },
        computed: {
            goodsNum() {
                let num = 0
                this.cartData.forEach(item => {
                    num += item.number
                })
                if (num < 99) {
                    return num
                } else {
                    return '99+'
                }
            },
            goodsPrice() {
                let price = 0
                this.cartData.forEach(item => {
                    price += (item.number * item.amount)
                })
                return price
            }
        },
        created() {
        },
        mounted() {
            this.initData()
        },
        methods: {
            //初始化数据
            initData() {
                //获取套餐+玩具列表与购物车列表
                Promise.all([categoryListApi(), cartListApi({})]).then(res => {
                    //获取分类数据 res[0]的数据为categoryListApi响应结果
                    if (res[0].code === 1) {
                        this.categoryList = res[0].data//获取相应的category列表
                        if (Array.isArray(res[0].data) && res[0].data.length > 0) {//非空集合判定
                            this.categoryId = res[0].data[0].id//用于查询 id  相应的列表
                            //默认显示0集合的内容 根据类型发送请求
                            if (res[0].data[0].type === 1) {
                                this.getToyList()
                            } else {
                                this.getSetmealData()
                            }
                        }
                    } else {
                        this.$notify({type: 'warning', message: res[0].msg});
                    }

                    //获取购物车的数据 res[0]的数据为cartListApi响应结果
                    if (res[1].code === 1) {
                        this.cartData = res[1].data//显示购物车列表
                    } else {
                        this.$notify({type: 'warning', message: res[1].msg});
                    }
                })
            },
            //分类点击 根据当前活跃的index 进行切换左侧导航栏再根据 id, type对应的类型发送不同的api进行查询将右侧列表显示出来
            categoryClick(index, id, type) {
                this.activeCategoryType = type;
                this.activeType = index
                this.categoryId = id
                if (type == 1) {//玩具
                    this.getToyList()
                } else {
                    this.getSetmealData()
                }
            },
            //获取玩具列表数据
            async getToyList() {
                this.activeCategoryType = 1;
                if (!this.categoryId) {
                    return
                }
                const res = await toyListApi({categoryId: this.categoryId, status: 1})
                if (res.code === 1) {
                    let toyList = res.data
                    const cartData = this.cartData
                    if (toyList.length > 0 && cartData.length > 0) {
                        toyList.forEach(toy => {
                            cartData.forEach(cart => {
                                if (toy.id === cart.toyId) {
                                    toy.number = cart.number
                                }
                            })
                        })
                    }
                    this.toyList = toyList
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },
            //获取套餐列表数据setmealId
            async getSetmealData() {
                this.activeCategoryType = 2;
                if (!this.categoryId) {
                    return
                }
                const res = await setmealListApi({categoryId: this.categoryId, status: 1})
                if (res.code === 1) {
                    let toyList = res.data
                    const cartData = this.cartData
                    if (toyList.length > 0 && cartData.length > 0) {
                        toyList.forEach(toy => {
                            cartData.forEach(cart => {
                                if (toy.id === cart.setmealId) {
                                    toy.number = cart.number
                                }
                            })
                        })
                    }
                    this.toyList = toyList
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },
            //获取购物车数据
            async getCartData() {
                const res = await cartListApi({})
                if (res.code === 1) {
                    this.cartData = res.data
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },

            //菜单中往购物车中添加商品 (+号按钮 而不是初次添加)
            async addCart(item) {
                let params = {
                    amount: item.price / 100,//金额
                    name: item.name,
                    image: item.image,
                    toyId: undefined,//玩具id
                    setmealId: undefined//套餐id
                }
                if (this.activeCategoryType === 1) {//表示是玩具
                    params.toyId = item.id
                } else {//表示套餐
                    params.setmealId = item.id
                }
                const res = await addCartApi(params)

                if (res.code === 1) {
                    //将修改过后的数量重新同步
                    this.toyList.forEach(toy => {
                        if (toy.id === item.id) {
                            toy.number = res.data.number
                        }
                    })
                    //套餐的对话框是打开的则也进行数量同步
                    if (this.setMealDialog.show) {
                        item.number = res.data.number
                    }
                    //重新获取购物车数据
                    this.getCartData()
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },
            //单中往购物车中减少商品 (-号按钮)
            async subtractCart(item) {
                let params = {
                    toyId: item.toyId,
                    setmealId: item.setmealId,
                }
                if (this.activeCategoryType === 1) {//表示是玩具
                    params.toyId = item.id
                } else {//表示套餐
                    params.setmealId = item.id
                }
                //数量修改
                const res = await updateCartApi(params)
                if (res.code === 1) {
                    //数量同步
                    this.toyList.forEach(toy => {
                        if (toy.id === item.id) {
                            toy.number = (res.data.number === 0 ? undefined : res.data.number)
                        }
                    })
                    //数量同步
                    if (this.setMealDialog.show) {
                        item.number = (res.data.number === 0 ? undefined : res.data.number)
                    }
                    //重新查询购物车数据
                    this.getCartData()
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },
            //展开下方购物车 前提是购物车要有东西
            openCart() {
                if (this.cartData.length > 0) {
                    this.cartDialogShow = true
                }
            },
            //购物车中增加商品数量
            async cartNumAdd(item) {
                let params = {
                    amount: item.amount,//金额
                    toyId: item.toyId,//玩具id
                    setmealId: item.setmealId,//套餐id
                    name: item.name,
                    image: item.image
                }
                const res = await addCartApi(params)
                if (res.code === 1) {
                    //数量同步
                    this.toyList.forEach(toy => {
                        if (toy.id === (item.toyId || item.setmealId)) {
                            toy.number = res.data.number
                        }
                    })
                    //重新查询数据
                    this.getCartData()
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },
            //购物车中减少商品数量
            async cartNumberSubtract(item) {
                let params = {
                    toyId: item.toyId,
                    setmealId: item.setmealId,
                }
                const res = await updateCartApi(params)
                if (res.code === 1) {
                    //数量同步
                    this.toyList.forEach(toy => {
                        if (toy.id === (item.toyId || item.setmealId)) {
                            toy.number = (res.data.number === 0 ? undefined : res.data.number)
                        }
                    })
                    //重新查询数据
                    this.getCartData()
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },

            //修改商品列表中的数据number？
            changeToyList(item) {
                for (let ele of this.toyList) {
                    if (ele.id === (item.setmealId || item.toyId)) {
                        ele.number = item.number
                    }
                }
            },

            //清空购物车
            async clearCart() {
                const res = await clearCartApi()
                if (res.code === 1) {
                    for (let ele of this.toyList) {
                        ele.number = undefined
                    }
                    this.cartData = []
                    this.cartDialogShow = false
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },
            //网络图片路径转换
            imgPathConvert(path) {
                return imgPath(path)
            },
            //跳转到去结算界面
            toAddOrderPage() {
                if (this.cartData.length > 0) {
                    window.requestAnimationFrame(() => {
                        window.location.href = '/front/page/add-order.html'
                    })
                }
            },
            // 个人中心的页面跳转
            toUserPage() {
                window.requestAnimationFrame(() => {
                    window.location.href = '/front/page/user.html'
                })
            },
            // 显示详细的信息
            async toyDetails(item) {
                //先清除对象数据，如果不行的话dialog使用v-if
                this.detailsDialog.item = {}
                this.setMealDialog.item = {}
                if (this.activeCategoryType === 1) {
                    this.detailsDialog.item = item
                    this.detailsDialog.show = true
                } else {
                    //显示套餐的数据
                    const res = await setMealToyDetailsApi(item.id)
                    if (res.code === 1) {
                        this.setMealDialog.item = {...item, list: res.data}
                        this.setMealDialog.show = true
                    } else {
                        this.$notify({type: 'warning', message: res.msg});
                    }
                }

            }
        }
    })
</script>
</html>
